<script>
import {Search, Refresh} from "@element-plus/icons-vue";

export default {
  name: "ListArea",
  computed: {},
  props: {
    listUrl:String,
    listTitle:String,
    showDefaultBtn:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      icon: []
    }
  },
  methods: {
    handleFilterArea() {
      this.$emit("handleFilter");
    },
    onCreate(){
      this.$emit("create",this.listUrl,'添加'+this.listTitle)
    }
  },
  created() {
    this.icon.push(Search, Refresh);
  },
  mounted() {
  }
}

</script>

<template>
  <div class="list_area">
    <div class="flex-rcs">
      <div class="flex-rn">
        <div v-if="showDefaultBtn" style="margin-right:12px;">
          <el-button @click="onCreate" type="primary">新增</el-button>
          <el-button custom-type="modify">修改</el-button>
          <el-button type="danger">删除</el-button>
        </div>
        <slot name="btn-extend-item"></slot>
      </div>
      <div>
        <el-button @click="handleFilterArea" title="显示/隐藏搜索区域" custom-type="icon" :icon="icon[0]"></el-button>
        <el-button custom-type="icon" :icon="icon[1]"></el-button>
      </div>
    </div>
    <div class="list">
      <slot name="table-list"></slot>
    </div>
    <div>
      <slot name="table-pagination"></slot>
    </div>
  </div>
</template>

<style lang="scss">
.list_area {
  width: 96%;
  margin: 20px auto 0;
  padding: 10px;
  background-color: #fff;
  height: fit-content;

  .list {
    margin-top: 10px;
  }
}
</style>
